<template>
  <div class="map-container" ref="mapContainer"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import * as echarts from 'echarts';
import { china } from 'china-map-data';

const mapContainer = ref(null);
const chart = ref(null);

// 模拟各省商家数据
const businessData = [
  { name: '北京', value: 12500 },
  { name: '天津', value: 8200 },
  { name: '河北', value: 15600 },
  { name: '山西', value: 9800 },
  { name: '内蒙古', value: 7600 },
  { name: '辽宁', value: 11200 },
  { name: '吉林', value: 8700 },
  { name: '黑龙江', value: 9200 },
  { name: '上海', value: 18700 },
  { name: '江苏', value: 22300 },
  { name: '浙江', value: 24500 },
  { name: '安徽', value: 13200 },
  { name: '福建', value: 14800 },
  { name: '江西', value: 10200 },
  { name: '山东', value: 19600 },
  { name: '河南', value: 16700 },
  { name: '湖北', value: 15300 },
  { name: '湖南', value: 13900 },
  { name: '广东', value: 28900 },
  { name: '广西', value: 10800 },
  { name: '海南', value: 6400 },
  { name: '重庆', value: 15800 },
  { name: '四川', value: 17600 },
  { name: '贵州', value: 9400 },
  { name: '云南', value: 11500 },
  { name: '西藏', value: 3200 },
  { name: '陕西', value: 12800 },
  { name: '甘肃', value: 8100 },
  { name: '青海', value: 4700 },
  { name: '宁夏', value: 5300 },
  { name: '新疆', value: 7900 },
  { name: '台湾', value: 10200 },
  { name: '香港', value: 13500 },
  { name: '澳门', value: 4200 }
];

// 计算全国商家总数
const totalBusiness = computed(() => {
  return businessData.reduce((sum, item) => sum + item.value, 0);
});

// 获取数据的最大值和最小值
const maxValue = Math.max(...businessData.map(item => item.value));
const minValue = Math.min(...businessData.map(item => item.value));

// 初始化地图
const initMap = () => {
  if (!mapContainer.value) return;

  // 注册中国地图
  echarts.registerMap('china', china);

  // 初始化图表
  chart.value = echarts.init(mapContainer.value);

  // 配置项
  const option = {
    title: {
      text: '中国各省商家分布数据图',
      left: 'center',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#ccc',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      },
      formatter: (params) => {
        const data = params.data;
        return `
          <div style="font-weight: bold;">${data.name}</div>
          <div>商家数量: ${data.value.toLocaleString()} 家</div>
          <div>全国占比: ${((data.value / totalBusiness.value) * 100).toFixed(2)}%</div>
        `;
      }
    },
    visualMap: {
      type: 'continuous',
      min: minValue,
      max: maxValue,
      left: '10%',
      bottom: '20px',
      text: ['商家数量多', '商家数量少'],
      calculable: true,
      inRange: {
        color: ['#e0ecff', '#a6c8e3', '#50a3ba', '#316685', '#0a4da2']
      }
    },
    series: [
      {
        name: '商家数据',
        type: 'map',
        mapType: 'china',
        roam: false,
        selectedMode: false, // 禁用选中模式
        label: {
          show: false // 不显示省份名称
        },
        itemStyle: {
          normal: {
            borderColor: '#fff',
            borderWidth: 1
          },
          emphasis: {
            areaColor: '#c8e1ff',
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          // 确保选中状态颜色与正常状态一致
          selected: {
            areaColor: echarts.color.getColor
          }
        },
        data: businessData
      }
    ]
  };

  // 设置配置项
  chart.value.setOption(option);

  // 添加全国总量显示
  setTimeout(() => {
    const totalHtml = `
      <div style="position: absolute; right: 20px; top: 20px; background-color: rgba(255, 255, 255, 0.8);
                  padding: 10px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
        <div style="font-weight: bold;">全国商家总量</div>
        <div style="font-size: 24px; color: #0a4da2;">${totalBusiness.value.toLocaleString()} 家</div>
      </div>
    `;

    chart.value.getDom().insertAdjacentHTML('beforeend', totalHtml);
  }, 100);

  // 处理点击事件，阻止默认行为
  chart.value.on('click', (params) => {
    // 这里可以添加自定义点击逻辑
    console.log('点击了省份:', params.name);
  });
};

// 响应窗口大小变化
const resizeChart = () => {
  if (chart.value) {
    chart.value.resize();
  }
};

onMounted(() => {
  initMap();
  window.addEventListener('resize', resizeChart);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart);
  if (chart.value) {
    chart.value.dispose();
  }
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 600px;
  margin-top: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}
</style>